<template>
	<view class="" >
			
		<view class="bar-box"  :style="{bottom:bottom+'%'}">
			<view class="alert" v-if="price.toFixed(1)>=Number(alertdata.free_shipping)?false:true">
				<u-alert v-if="alertdata" style="direction: rtl;pointer-events: auto" :title="i18nLocale=='ug'?alertdata.ug_notice:alertdata.cn_notice"  type ="success" :closable="true" ></u-alert>
			</view>
			<view class="" style="display: flex;width:100%;justify-content: space-between;height:100%;" @click="changecart">
				<view class="shre-left">
					<view class="icon-box">
						<u-icon name="shopping-cart" color="#45bc1b" size="48"></u-icon>
						<view class="number">{{totalnumber}}</view>
					</view>
					<view class="price-box">
						<view class="price">￥<text style="font-weight: bold;">{{price.toFixed(1)}}</text> </view>
						<view :class="price.toFixed(1)>=Number(alertdata.free_shipping)?'move-price dcrtion-price':'move-price'">{{$t('DeliveryFees')}} :￥{{Shipment}}</view>
					</view>
				</view>
				<view class="share-right" @click.stop="Checkout" :style="{backgroundColor:totalnumber>0?'#45bc1b':''}">
					{{$t(title)}}
				</view>
			</view>
		</view>
		<!-- 展示选好的商品 -->
		<u-popup :show="cartshow" :round="10" mode="bottom" @close="close" @open="open">
			<view class="shop-liist">
				<view class="top-title">
					<text>{{$t('SelectedList')}}</text>
					<u-icon name="trash" color="#6a6a6a" size="32" @click="clearcar" ></u-icon>
				</view>
				<view class="scroll-conetnt">
					<scroll-view scroll-y="true" style="width:100%;height:100%;">
						<view class="" v-for="(big_item,big_index) in  totalshop">
							<view class="" v-for="(item,index) in totalshop[big_index].categories">
								<view class="sub-item" v-for="(sub_item,sub_index) in item.products" v-if="sub_item.qty">
									<view class="left">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
									<view class="right">
										<view class="price">￥ {{(sub_item.price*sub_item.qty).toFixed(2)}}</view>
										<!-- 加减组件 -->
										<NumberCalculation :qty="sub_item.qty" :item="sub_item" :index="index" :shopid="big_item.id" >
										</NumberCalculation>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="height:300rpx;"></view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NumberCalculation from "./NumberCalculation.vue"
	import {
		getconfigs
	} from '@/api/all.js';
	 
	export default {
		components: {
			NumberCalculation
		},
		props:['title','bottom'],
		data() {
			return {
				numValue: 0,
				cartshow: false,
				alertdata:''
			}
		},
		computed: {

			i18nLocale() {
				return this.$i18n.locale;
			},

			price() {
				return this.$store.state.shop.totalprice;
			},
			totalnumber() {
				return this.$store.state.shop.totalnumber;
			},
			totalshop() {
				return this.$store.state.shop.totalshop;
			},
			Shipment() {
				console.log()
				return this.$store.state.shipment;
			},
			
		},
		mounted() {
			let that=this;
			getconfigs({}).then((res)=>{
				console.log(res,'+++++')
				if(res.code==200){
					let data=res.body.data;
					that.$store.commit('setShipment',data.shipment_charge)
					that.alertdata=data;
				}
			})
		},
		methods: {
			Checkout() {
				if(this.$store.state.shop.totalnumber > 0){
						uni.navigateTo({
							url: '/pages/order/confirmorder'
						})
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.cartshow = false
			},
			changecart() {
				if (this.cartshow) {
					this.cartshow = false
				} else {
					if (this.$store.state.shop.totalnumber > 0) {
						this.cartshow = true
					}
				}

			},
			clearcar(){
				this.$store.state.shop.totalshop.map(big_item=>{
					big_item.categories.map(item=>{
						item.products.map(sub_item=>{
							console.log(sub_item,'+++sub_item+++')
							if(sub_item.qty){
								sub_item.qty=0;
							}	
						})
					})
				})
				this.$store.commit('clearShop')
				this.cartshow=false;
			}
		}
	}
</script>

<style lang="scss">
	.bar-box {
		width: 92%;
		height: 100rpx;
		left: 4%;
		position: fixed;
		bottom: 10%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 50rpx;
		background-color: rgba(51, 51, 51, 1);
		z-index: 400;
		.alert{
			position: absolute;
			top:-100%;
			width:100%;
			display: flex;
			justify-content: center;
			pointer-events: none;
		}
		.shre-left {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 20rpx;

			.icon-box {
				position: relative;

				.number {
					position: absolute;
					top: 0%;
					right: 0%;
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					background-color: $uni-color-topic;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					border: 4rpx solid #333333;
				}
			}

			.price-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 10rpx;

				.price {
					color: #fff;
					font-size: 36rpx;
					font-weight: 300;
				}
				
				.move-price {
					color: $uni-text-color-grey;
					font-size: $uni-font-size-paragraph;
				}
				.dcrtion-price{
					text-decoration: line-through;
				}
			}
			
		}

		.share-right {
			height: 100%;
			background-color: #000000;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0rpx 60rpx;
			box-sizing: border-box;
			font-size: 38rpx;
			// font-weight: 550;
		}
	}

	.shop-liist {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		height: 70vh;

		.top-title {
			width: 100%;
			height: 120rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
			border-radius: $uni-border-radius-lg $uni-border-radius-lg 0rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eff1f6;

		}

		.scroll-conetnt {
			width: 100%;
			height: calc(100% - 120rpx);

			.sub-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0rpx;
			}

			.right {
				display: flex;
				align-items: center;

				.price {
					padding: 0rpx 30rpx;
					box-sizing: border-box;
					color: $uni-color-topic;
					font-size: 38rpx;
				}
				
			}
		}
	}
</style>